<template>
  <div class="viewBox">
    <div class="close" @click="closeView">
      <div class="close-btn">x</div>
    </div>
    <h1 class="title">
      {{ artical.title }}
    </h1>
    <div class="tags common">
      <span class="labelSpan">标签</span>
      <span class="labelContent">
        <el-tag 
          v-for="tag in artical.tags" 
          type="success"
          class="tag"
          key="tag.id">{{ tag.tagName }}
        </el-tag>
      </span>
    </div>
    <div class="date common">
      <span class="labelSpan">时间</span>
      <span 
        class="labelContent">
        {{ artical.updateTime }}
      </span>
    </div>
    <div class="common">
      <span class="labelSpan">摘要</span>
      <span 
        class="labelContent">
        {{ artical.summary }}
      </span>
    </div>
    <div class="common">
      <span class="labelSpan">内容</span>
      <span 
        v-html="artical.content" 
        class="labelContent">
      </span>
    </div>
    <div class="center">
      <el-button @click="refuse">审核未通过</el-button>
      <el-button type="primary" @click="pass">审核通过</el-button>
    </div>
  </div>
</template>

<script>

  import { mapActions } from 'vuex'
  export default {
    name: 'articalView',
    data () {
      return {
  
      }
    },
    props: ['artical'],
    methods: {
      ...mapActions([
        'examine'
      ]),
      pass () {
        const params = {
          result: 1,
          newsId: this.artical.id,
          userId: 1
        }
        this.$store.dispatch('examine', {params: params})
          .then(() => {
            this.$emit('close')
          })
      },
      refuse () {
        this.$prompt('请输入审核未通过原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          const params = {
            result: 0,
            remarks: value,
            newsId: this.artical.id
          }
          this.$store.dispatch('examine', {params: params})
            .then(() => {
              this.$emit('close')
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '在审查一下吧'
          })
        })
      },
      closeView () {
        this.$emit('close')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .viewBox
    position: absolute
    width: 800px
    top: 100px
    left: 50%
    margin-left: -400px
    box-shadow: 1px 1px 5px 1px #eee
    border: 1px solid #eee
    z-index: 999
    background: white
    .center
      display: flex
      justify-content: center
      margin: 20px
    .close
      font-size: 30px
      &:after
        content: ''
        display: block
        clear: both
      .close-btn
        float: right
        display: block
        width: 30px
        line-height: 30px
        text-align: center
        &:hover
          box-shadow: 1px 1px 1px 1px #eee
          cursor: pointer
    .common
      margin-top: 10px
      padding: 10px 30px
      font-family: serif
      display: flex
      align-items: flex-start
      .labelSpan
        flex: 1
        display: flex
        justify-content: center
        align-items: center
        font-size: 18px
        font-weight: bold
        color: #394b6b
      .labelContent
        flex: 5
    .title
      text-align: center
    .tags
      text-align: left
      .input-tag
        width: 100px
        height: 40px
      .tag
        width: 80px
        line-height: 30px
        height: 30px
        text-align: center
        margin: 0 10px
</style>
